<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Вёрстка растягивающихся сайтов</title>
<style>
    /* html/css coder: Alexey Horyakov | horyakov.ru
------------------------------------------------ */

/* Global
------------------------------------------------ */

* { padding: 0; margin: 0; }
body { font: normal 12px/1.3 Arial, sans-serif; color: #000; }

img, fieldset { border: 0; }
fieldset legend { display: none; }

a:link,
a:visited,
a:hover,
a:active { background: transparent; color: #000; text-decoration: underline; }
a:hover { color: #000; text-decoration: none; }

p { padding: 10px; }

/* Layout
------------------------------------------------ */

/*.wrapper { width: 100%; margin: auto; background: #transparent; }*/

/* Columns
------------------------------------------------ */

.columns-wrap { position: relative; width: 16%; margin: auto; }
.columns-wrap .columns { position: relative; width: 100%; margin-right: -100%;  }
.columns-wrap .columns .column { position: relative; float: left; width: 50%; margin-right: -50%; height:1000px; //margin-right: -100%; }
.columns-wrap .column-1 { left: -250%; background: #eee378; z-index:100}
.columns-wrap .column-2 { left: -50%; background: #346378; }
.columns-wrap .column-3 { left: 0;  background: #68ae74; }
.columns-wrap .column-4 { left: 50%; background: #997638;  }
.columns-wrap .column-5 { left: 100%;  background: #ea2378; }
.incut { position: relative; left: 0; width: 100%; margin-right: -100%; }
.incut .incut { float: left; background: rgba(166, 124, 86, 0.7); //background: #CCC; }

/* Header
------------------------------------------------ */

.header { background: #F6AD11; }
.header .logo { width: 200%; margin-right: -200%; background: #eee378;}
.header .menu { left: 200%; width: 700%; margin-right: -700%; background: #ea3d78; }
.header .options { left: 900%; width: 200%; margin-right: -200%; background: #edf378; }

/* Content
------------------------------------------------ */

.content { background: #A5F904; }
.content .text { width: 400%; margin-right: -400%; }
.content .sidebar { left: 400%; width: 100%; margin-right: -100%; }

/* Footer
------------------------------------------------ */

.footer { background: #01FFC6; }
.footer .copy { width: 100%; margin-right: -100%; }
.footer .text { left: 100%; width: 400%; margin-right: -400%; }

/* Other
------------------------------------------------ */

.clear { clear: both; zoom: 1; }
</style>
</head>
<body>
        <div class="columns-wrap">
			<div class="columns">

				<div class="column column-1">

					<div class="incut header">

						<div class="incut logo">Логотип</div>
						<div class="incut menu">
							<ul>
								<li><a href="#">Наша компания</a></li>
								<li><a href="#">Мы предлагаем</a></li>

								<li><a href="#">Медиа-центр</a></li>
								<li><a href="#">Акционерам и инвесторам</a></li>
								<li><a href="#">Поддержка и сервис</a></li>
							</ul>
						</div>
						<div class="incut options">
							Язык сайта:
							<select name="lang">

								<option value="ru">Русский</option>
								<option value="en">English</option>
							</select>
						</div>
						<div class="clear"></div>
					</div>
 				</div>
				<!--<div class="column column-2">2</div>-->
				<!--<div class="column column-3">3</div>-->
				<!--<div class="column column-4">4</div>-->
				<!--<div class="column column-5">5</div>-->
				<div class="clear"></div>

			</div>
		</div>

 
 
	<script type="text/javascript">
	function _columns(a)
{
    document.write('<style type="text/css"> .column_ { position: fixed; ' +
            'z-index: 999; top: 0; display: block; height: 100%;' +
            'border-right: 1px dashed #4affff; }' +
            '* html .column_ {position: absolute; } </style>');

    for (var i = 0, l = a.length; i < l; i++)
        document.write('<span class="column_" style="left: ' + a[i] + '%"></span>');
}

_columns([2, 10, 18, 26, 34, 42, 50, 58, 66, 74, 82, 90, 98]);
	</script>

</body>

</html>